import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: "张三"
  }
  componentWillMount() {
    // 只挂载一次，这里拿不到dom，因为还没有生成dom树，主要用于初始化，不推荐使用，可以使用构函数来实现
    // 16.2版本之前是老的生命周期
    console.log("第一次 will mount", this.state.username)
  }
  componentDidMount() {
    // 只挂载一次，主要用于数据请求，比如订阅函数调用、事件监听，基于创建完的dom进行初始化
    console.log("第一次 did mount", this.state.username)
  }
  render() {
    console.log("render")
    return (
      <div id='lifecycle'>
        <h1>{this.state.username}</h1>
        <button onClick={() => this.setState({ username: "李四" })}>修改</button>
      </div>
    )
  }
}
